<!DOCTYPE html>
<html>
<!---需要技术支持联系QQ：44312658--->
<head>
	<meta charset="utf-8">
	<title>登录界面</title>
	<link rel="stylesheet" href="css/reset.css"/>
	<link rel="stylesheet" href="css/common.css"/>
	<link rel="stylesheet" href="css/font-awesome.min.css"/>
	<!--引入layui组件-->
	<link rel="stylesheet" href="layui/css/layui.css"/>
	<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div class="wrap login_wrap">
	<div class="content">
		<div class="logo"></div>
		<div class="login_box">

			<div class="login_form">
				<div class="login_title">
					登录
				</div>
				<form action="#" method="post">

					<div class="form_text_ipt">
						<input name="username" type="text" placeholder="用户名/手机号/邮箱">
					</div>
					<div class="ececk_warning"><span>手机号/邮箱不能为空</span></div>
					<div class="form_text_ipt">
						<input name="password" type="password" placeholder="密码">
					</div>
					<div class="ececk_warning"><span>密码不能为空</span></div>
					<div class="form_check_ipt">
						<div class="left check_left">
							<label><input id="rememberme" checked type="checkbox">记住我</label>
						</div>
						<div class="right check_right">
							<a href="#">忘记密码</a>
						</div>
					</div>
					<div class="form_btn">
						<button type="button" onclick="doLogin()">登录</button>
					</div>
					<div class="form_reg_btn">
						<span>还没有帐号？</span><a href="reg.html">马上注册</a>
					</div>
				</form>
				<div class="other_login">
					<div class="left other_left">
						<span>其它登录方式</span>
					</div>
					<div class="right other_right">
						<a href="#"><i class="fa fa-qq fa-2x"></i></a>
						<a href="#"><i class="fa fa-weixin fa-2x"></i></a>
						<a href="#"><i class="fa fa-weibo fa-2x"></i></a>
					</div>
				</div>
				<div style="text-align: center">
					<span><a href="index.html">返回首页</a></span>
					<br/>
					<br/>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script src="js/myCookie.js"></script>
<div style="text-align:center;">
</div>
</body>
<script>

	layui.use(['layer'], function(){
		var layer = layui.layer;
	});


	document.querySelector("[name='username']").value = Cookie.get("username.servletdemo.com");
	document.querySelector("[name='password']").value = Cookie.get("password.servletdemo.com");

	function doLogin() {
		let username = document.querySelector("[name='username']").value;
		let password = document.querySelector("[name='password']").value;
		console.log("用户名：" + username);
		console.log("密码：" + password);

		$.ajax({
			url: "https://localhost:8443/servletdemo/users/login?username=" + username + '&password=' + password,
			type: "GET",
			dataType: "text",
			success: function (resp) {
				let result = JSON.parse(resp); //字符串转成json对象
				//console.log(resp);
				if (result.code === 200) {
					console.log("登录成功的用户对象是");
					console.log(result.data);
					//把服务器返回的登录成功的用户对象保存到浏览器缓存里面
					localStorage.setItem("currentLoginUser.servletdemo.com",JSON.stringify(result.data));

					//判断用户是否选中了保存账号。
					if($("#rememberme").is(":checked")){
						//console.log('记住我！');
						Cookie.set("username.servletdemo.com",username,100);
						Cookie.set("password.servletdemo.com",password,100);

					}else{
						//console.log("忘记我！");
						Cookie.remove("username.servletdemo.com");
						Cookie.remove("password.servletdemo.com");
					}
					window.setTimeout("javascript:window.location.href='index.html'",2000);
					//window.location.href = "index.html";
				} else {
					layer.msg('登录失败，请检查用户名或者密码是否正确！')
				}
			}
		});
		//console.log("执行用户登录...");
	}


</script>
</html>
